<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { userApi } from '../api'

const router = useRouter()
const route = useRoute()

// 表单数据
const formData = reactive({
  username: '',
  password: ''
})

// 错误信息
const errorMsg = ref('')
// 加载状态
const loading = ref(false)

// 登录方法
const handleLogin = async () => {
  // 表单验证
  if (!formData.username || !formData.password) {
    errorMsg.value = '用户名和密码不能为空'
    return
  }
  
  // 重置错误信息
  errorMsg.value = ''
  // 设置加载状态
  loading.value = true
  
  try {
    // 调用登录API
    const res = await userApi.login(formData)
    
    // 登录成功，保存用户信息到本地存储
    // 确保存储完整的用户信息，包括角色信息
    console.log('登录响应数据:', res.data)
    
    if (res.data && res.data.user) {
      localStorage.setItem('user', JSON.stringify(res.data.user))
      console.log('存储到localStorage的用户信息:', res.data.user)
    } else {
      console.error('登录响应中没有用户信息')
      errorMsg.value = '登录失败，服务器返回数据格式错误'
      loading.value = false
      return
    }
    
    // 获取重定向地址或默认跳转到仪表盘
    const redirectPath = route.query.redirect || '/dashboard'
    router.push(redirectPath)
  } catch (error) {
    // 登录失败，显示错误信息
    errorMsg.value = error.message || '登录失败，请检查用户名和密码'
    console.error('登录失败:', error)
  } finally {
    // 重置加载状态
    loading.value = false
  }
}

// 跳转到注册页面
const goToRegister = () => {
  router.push('/register')
}
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <h2>二维码管理系统-登录</h2>
      
      <!-- 错误提示 -->
      <div v-if="errorMsg" class="error-message">
        {{ errorMsg }}
      </div>
      
      <!-- 登录表单 -->
      <form @submit.prevent="handleLogin" class="login-form">
        <div class="form-group">
          <label for="username">用户名</label>
          <input 
            type="text" 
            id="username" 
            v-model="formData.username" 
            placeholder="请输入用户名"
            autocomplete="username"
          >
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input 
            type="password" 
            id="password" 
            v-model="formData.password" 
            placeholder="请输入密码"
            autocomplete="current-password"
          >
        </div>
        
        <div class="form-actions">
          <button type="submit" :disabled="loading" class="btn-login">
            {{ loading ? '登录中...' : '登录' }}
          </button>
          <button type="button" @click="goToRegister" class="btn-register">
            注册账号
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: var(--spacing-lg);
  position: relative;
}

.login-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.login-box {
  width: 100%;
  max-width: 500px;
  padding: calc(var(--spacing-xxl) + var(--spacing-lg));
  background: rgba(255, 255, 255, 0.98);
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--gradient-primary);
  border-radius: 32px 32px 0 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.login-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2), 0 12px 35px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

h2 {
  text-align: center;
  margin: var(--spacing-lg) 0 var(--spacing-xl);
  color: var(--dark-color);
  font-weight: 700;
  font-size: 2rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

h2::after {
  content: '🔐';
  display: block;
  font-size: 2.5rem;
  margin-top: var(--spacing-sm);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.error-message {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: var(--danger-color);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
  font-weight: 500;
  border-left: 4px solid var(--danger-color);
  box-shadow: var(--shadow-sm);
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.login-form {
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-lg);
}

.form-group {
  margin-bottom: var(--spacing-lg);
  position: relative;
}

label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--dark-color);
  font-size: 0.95rem;
}

input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.9rem;
  font-family: var(--font-family);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.95);
  color: var(--dark-color);
  box-sizing: border-box;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

input:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.02);
  background: white;
  transform: translateY(-2px) scale(1.02);
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

button {
  padding: 12px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

button:hover:not(:disabled)::before {
  left: 100%;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-login {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25), 0 3px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  transform: translateY(0);
}

.btn-login:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35), 0 4px 15px rgba(0, 0, 0, 0.12);
}
.btn-register {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
  margin-bottom: var(--spacing-lg);
}
.btn-register:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25), 0 3px 8px rgba(0, 0, 0, 0.08);
}
</style>